{% extends 'base.twig' %}

{% block extraHead %}
<style>
.table { width: auto !important; }
.table td,th { font-family: Trebuchet MS; vertical-align: top !important; }
.table td { cursor: move; }
</style>
{% endblock %} 

{% block contentContainer %}
<div class="example">
	<a href="{{ path('add-model', { type: type, returnURL: returnURL|url_encode }) }}">
		<button class="button success">
			<i class="fa fa-plus-circle"></i>&nbsp;&nbsp;Add new model
		</button>
	</a> 
	{% if models|length > 0 %}
	<table class="table striped bordered hovered" style="margin-top: 5px;">
		<thead>
			<tr>
				<th class="text-left">ID</th>
				<th class="text-left">Name</th>
				<th class="text-left">Visible</th>
				<th class="text-left">Permission</th>
				<th class="text-left">Section</th>
				<th class="text-left">ID field</th>
				<th class="text-left">Listing page</th>
				<th class="text-left">Items per page</th>
				<th class="text-left">Default sort by</th>
				<th class="text-left">Fileds number</th>
				<th class="text-left">&nbsp;</th>
			</tr>
		</thead>
		<tbody id="columns">
			{% for itm in models %}
			<tr id="{{ itm.id }}">
				<td style="width: 40px;">{{ itm.id }}</td>
				<td style="width: 300px;">{{ itm.name }}</td>
				<td style="width: 80px;">{{ itm.visible == 1 ? '<i style="color: green;" class="fa fa-check"></i>' : '<i style="color: red;" class="fa fa-times"></i>' }}</td>
				<td style="width: 80px;">{{ itm.permission == 0 ? 'User' : 'Admin' }}</td>
				<td style="width: 80px;">
					{% if itm.type == 0 %}
						Built-in
					{% elseif itm.type == 1 %}
						Custom
					{% endif %}
				</td>
				<td style="width: 80px;">{{ itm.visible == 1 ? itm.idField : '-' }}</td>
				<td style="width: 80px;">{{ itm.visible == 1 ? (itm.resortable == 1 ? 'Sortable' : 'Pagination') : '-' }}</td>
				<td style="width: 80px;">{{ (itm.visible == 1 and itm.resortable == 0) ? itm.numPerPage : '-' }}</td>
				<td style="width: 80px;">{{ (itm.visible == 1 and itm.resortable == 0) ? itm.defaultSortBy : '-' }}</td>
				<td style="width: 50px;">{{ itm.columnsJson|json_decode|length }}</td>
				<td style="width: 60px;">
				  <a href="{{ path('edit-model', { type: type, returnURL: returnURL|url_encode, name: itm.name|url_encode }) }}"><i class="fa fa-pencil"></i></a>
				  <a href="#" style="margin-left: 5px;" class="myDelete" data-id=""><i class="fa fa-timesl"></i></a>
				</td>
			</tr>
			{% endfor %}
		</tbody>
	</table>
	{% endif %}
</div>
{% endblock %} 

{% block extraFoot %}
<script>
	$(function() {
		$('#columns').sortable({
			stop: function( event, ui ) {
				$.ajax({
					type: 'POST',
					url: '{{ path('sort-models') }}',
					data: 'data=' + encodeURIComponent(JSON.stringify($('#columns').sortable("toArray"))),
					success : function(msg) {}
				});
			}
		})
	});
</script>
{% endblock %}

